<div id='todoApp' ng-controller='TodoCtrl'>

  <section class="todolist">
    <div class='todo-header'>
      <input type='checkbox' class='toggle-all' ng-change='toggleAll()' ng-model='allToggle'>

      <form ng-submit='addTodo()' id='new_todoitem'>
        <input type='text' ng-model='todoitem.title' placeholder="What needs to do?">
      </form>
    </div>

    <div class='todo-main'>
      <ul class='unstyled'>
        <li ng-repeat="todo in todos" ng-class="{selected: todo.is_complete}">
          <input type="checkbox" ng-checked='todo.is_complete' ng-model='todo.is_complete' class='toggle'>
          <label>{{todo.title}}</label>
        </li>
      </ul>

    </div>

    <div class='todo-footer'>
      <span class='todo-left'>{{todos.length}} items left</span>
    </div>
  </section>
</div>